<template>
  <div style="display: inline-block">
    <template v-if="formItem.props.group === true">
      <el-select
        v-model="formVMHasType.value[formItemHasType.prop]"
        v-bind="formItemHasType.props"
        v-on="formItemHasType.events"
        v-show-tooltip.everyShow="__showTitle()"
        title=""
        options=""
        ref="comRef"
      >
        <el-option-group
          v-for="group in formItem.props.options || []"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.children || []"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            <template #default>
              <RenderVNode
                :vnodes="__getSlot('default')"
              ></RenderVNode>
            </template>
          </el-option>
        </el-option-group>
        <template #prefix>
          <RenderVNode
            :vnodes="__getSlot('prefix')"
          ></RenderVNode>
        </template>
        <template #empty>
          <RenderVNode
            :vnodes="__getSlot('empty')"
          ></RenderVNode>
        </template>
      </el-select>
    </template>
    <template v-else>
      <el-select
        v-model="formVM.value[formItem.prop]"
        v-bind="formItem.props"
        v-on="formItem.events"
        v-show-tooltip.everyShow="__showTitle()"
        title=""
        options=""
        ref="comRef"
      >
        <el-option
          v-for="item in formItem.props.options || []"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <template #default>
            <RenderVNode
              :vnodes="__getSlot('default')"
            ></RenderVNode>
          </template>
        </el-option>
        <template #prefix>
          <RenderVNode
            :vnodes="__getSlot('prefix')"
          ></RenderVNode>
        </template>
        <template #empty>
          <RenderVNode
            :vnodes="__getSlot('empty')"
          ></RenderVNode>
        </template>
      </el-select>
    </template>
  </div>
</template>

<script>
import {CommonMixin} from "../mixin/CommonMixin";

export default {
  name: "Select",
  mixins: [CommonMixin],
  methods: {
    __comInitValue() {
      if(this.formItem.props?.multiple === true){
        return []
      }
      return ''
    },
    __comShowTitle() {
      return ''
    },
  },
  data(){
    return {
    }
  }
}
</script>

<style scoped lang="scss">

</style>
